<template>
  <ProTable :request="request" :pagination="false" row-key="id">
    <template #buttons>
      <el-button type="primary" @click="$refs.opRef.open()">新增</el-button>
    </template>

    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="label" label="标识" width="180" />
    <el-table-column prop="remark" label="备注" width="180" />
    <el-table-column prop="createTime" label="创建时间" width="180" />
    <el-table-column prop="updateTime" label="更新时间" width="180" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-space>
          <el-button @click="$refs.opRef.open(row)">编辑</el-button>
          <el-button>删除</el-button>
        </el-space>
      </template>
    </el-table-column>
  </ProTable>

  <OpDialog ref="opRef" @success="onSuccess" />
</template>

<script>
import ProTable from "@/components/pro-table/index.vue";
import OpDialog from "./components/op-dialog.vue";
import { getMenuListAll } from "@/api/system";
import { deepTree } from "@/utils/common";

export default {
  name: "Menu",

  components: {
    ProTable,
    OpDialog,
  },

  methods: {
    async request(params) {
      try {
        const result = await getMenuListAll();
        const treeData = deepTree(result);

        return {
          success: true,
          list: treeData,
          total: 1,
        };
      } catch (error) {
        console.error("catch", error);
        // 如果有异常，则返回 success 为 false 的对象
        return {
          success: false,
        };
      }
    },

    onSuccess() {
      // 重新获取下个人信息
      this.$store.dispatch("user/getInfo");
    },
  },
};
</script>
